<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Member-Point-History-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :offset="1" :span="22" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="关键词">
              <el-input v-model="query.key" :clearable="true" placeholder="会员ID & 名称 & 手机号" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="register_btn" size="small" type="primary" @click="handleFetch">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :offset="1" :span="22" class="clearfix">
          <el-table :key="isIndex"
                    v-loading="isLoading"
                    :cell-style="{padding:'3px'}"
                    :data="memPointList" :height="tableHeight" :row-style="{height:'30px'}" border row-key="id" stripe
                    style="width: 100%">
            <el-table-column v-if="isIndex == 1" fixed label="序号" type="index" width="75"></el-table-column>
            <el-table-column prop="member_id" v-if="false"></el-table-column>
            <el-table-column fixed prop="uname" label="登录名" width="130"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="level_name" label="会员" width="100"></el-table-column>
            <el-table-column label="累积积分" prop="acct_point" width="100"></el-table-column>
            <el-table-column label="已使用积分" prop="used_point" width="100"></el-table-column>
            <el-table-column label="有效积分" prop="effect_point" width="100"></el-table-column>
            <el-table-column label="已失效积分" prop="invalid_point" width="100"></el-table-column>
            <el-table-column :width="optCulWidth" label="操作">
              <template v-slot="scope">
                <el-button plain size="mini" type="primary" @click="handleChgPot(scope.row)">调整</el-button>
                <el-button plain size="mini" type="info" @click="openDraw(scope.row)">积分记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :offset="1" :span="22" class="custRow clearfix">
          <el-pagination
              :current-page="currentPage"
              :page-count=10
              :page-size="query.pageSize"
              :page-sizes="[20, 50, 100]"
              :pager-count=5
              :total="query.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-drawer title="会员积分历史详细" :visible.sync="isDrawerShow" :with-header="false" :size="drawerWidth">
        <MemberPointHisDrawer :drawId="memId" @fMethod="closeDraw"></MemberPointHisDrawer>
      </el-drawer>
    </div>
    <div>
      <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" :width="dialogWidth">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 22px;">会员积分等级配置 </span>
            </div>
          </template>
          <el-form :model="MemChgPoint" label-width="140px">
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="调整值">
                <el-input v-model="MemChgPoint.grow_value" maxlength="100"></el-input>
            </el-form-item>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="升级方式">
              <el-tooltip class="item" effect="dark" content="1000充值 / 2000购买权益 / 3000积分 / 4000人工注册"
                          placement="right">
                <el-select v-model="MemChgPoint.upgrade_type" placeholder="升级方式" size="small">
                  <el-option label="请选择升级方式" value=-1></el-option>
                  <el-option :label="item.label" :value=item.value :data="item" v-for="item in upgrade_type_opts"
                             v-bind:key="item.value"></el-option>
                </el-select>
              </el-tooltip>
            </el-form-item>
            </el-col>
          </el-form>
        </el-card>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import { fetch} from "@/api/Member";
import { add} from "@/api/MemberPointHistory";
import MemberPointHisDrawer from '@/views/members/memberPointHisDrawer/MemberPointHisDrawer.vue'
export default {
  name: "MemberPointHistoryView",
  components: {
    MemberPointHisDrawer
  },
  data() {
    return {
      isIndex: 1,
      isLoading: true,
      currentPage: 1,
      total: 0,
      optCulWidth: 300,
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      MemChgPoint: {
        member_id:"",
        grow_value: 0,
        upgrade_type: "",
      },
      upgrade_type_opts: [
        {label: "充值", value: "1000", key: "1000"},
        {label: "购买权益", value: "2000", key: "2000"},
        {label: "积分", value: "3000", key: "3000"},
        {label: "人工注册", value: "4000", key: "3000"},
      ],
      tableHeight: 650,
      memPointList: [],
      dialogWidth: "1240px",
      dialogVisible: false,
      drawerWidth: "1240px",
      isDrawerShow: false,
      memId: '',
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {
        id: 0,
        points: 0,
        level: "",
      }
    },
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        let _res = eval(res.data);
        // 刷新页面表格
        this.memPointList = _res.lists;
        this.currentPage = _res.currentPage;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.handleFetch(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.handleFetch(this.query);
    },
    handleAdd() {
      add({data: this.MemChgPoint}).then((result) => {
        if (result.code == 200) {
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          this.dialogVisible = false;
          this.handleFetch();
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleChgPot(row){
      this.dialogVisible = true;
      this.MemChgPoint = {
        member_id: row.member_id,
        grow_value: 0,
        upgrade_type: "",
      }
    },
    openDraw(row) {
      if (row.member_id == undefined) {
        return;
      }
      this.memId = row.member_id;
      this.isDrawerShow = true;
    },
    closeDraw() {
      this.memId = "";
      this.isDrawerShow = false;
    }
  },
  created() {
    this.handleFetch();
  },
  mounted() {
  },
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>